<template>
    <div style="color: #36D; display: flex; flex-direction: column; align-items: center;">
        <p v-if="data" style="padding: 0;">
            已安全生产 <span class="tech-number">{{ data.safeDate }}</span> 天 &nbsp;
        </p>
        <p v-if="data" style="padding: 0;">夜班管理者:
            <a-avatar v-if="data.face_url" size="large"
                :src="'http://182.92.209.180:39999/jeecg-boot/sys/common/static/' + data.face_url" />
            {{ data.night_manager }} &nbsp;
        </p>
        <p v-if="data" style="padding: 0;">时间: {{ subTime(data.start_date) }} ~
            {{ subTime(data.end_date) }}
            &nbsp;</p>
    </div>
</template>

<script>
import { getAction } from '../../api/manage';

export default {
    name: 'DateTimeWidget',
    data() {
        return {
            data: null,
            intervalId: null, // 定时器ID
            url: {
                getData: '/safeProduction/safeProduction/getData',
            },
        };
    },
    computed: {
    },
    methods: {
        getData() {
            getAction(this.url.getData).then((res) => {
                if (res.success) {
                    this.data = res.result
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        subTime(time) {
            return time.substring(0, 10)
        },
    },
    mounted() {
        // 首次加载页面时立即获取天气信息
        this.getData();

        // 设置定时器，每60分钟获取一次天气信息 (60 * 60 * 1000 毫秒)
        this.intervalId = setInterval(() => {
            this.getData();
        }, 60 * 60 * 1000);
    },
    beforeDestroy() {
        // 清除定时器以防止内存泄漏
        clearInterval(this.intervalId);
    }
};
</script>
<style scoped>
@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

.tech-number {
    font-family: 'Courier New', Courier, monospace;
    /* 使用等宽字体 */
    font-size: 28px;
    color: #19a723;
    /* 设置你喜欢的颜色 */
    animation: blink 1.5s ease-in-out infinite;
    /* 应用闪烁动画 */
    background-color: rgba(0, 0, 0, 0.02);
    /* 轻微背景色突出显示 */
    padding: 2px 5px;
    /* 内边距让数字更加突出 */
    border-radius: 4px;
    /* 圆角处理增加现代感 */
    display: inline-block;
    /* 让元素可以设置宽度和高度 */
}
</style>